<template >
    <div id="bginfo" >

        <div class = "kuang" >
            <ul id="infoList">
                <li class="listyle0"><h2>{{ '用户名：'+ username}}</h2></li>
                <li class="listyle"><h2>{{ '角色：'+ role}}</h2></li>
                <li class="listyle"><h2>{{ 'ID：'+ id}}</h2></li>
                
                <li class="listyle"><h2>{{ '初始等级：'+ initialLevel}}</h2></li>
                <li class="listyle"><h2>{{ '学习目的：'+ learnPurpose}}</h2></li>
                <li class="listyle"><h2>{{ '学习计划：'+ planning}}</h2></li>
                <li class="listyle"><h2>{{ '学习方式：'+ learnStyle}}</h2></li>
                <li class="listyle"><h2>{{ '学习风格：'+ style}}</h2></li>

            </ul>
            <div class="btns111">
                <el-button type = "primary" round @click="dialogFormVisible_password = true">修改密码</el-button>
            </div>
            <!-- 修改密码弹窗 -->
            <div>
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible_password"  @closed="handleClose">
                    <!-- 修改的表单 -->
                    <!-- <el-form :model="password"  ref="editFormRef" label-width="70px">
                        <el-form-item label="旧密码">
                          <el-input v-model="password" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" >
                            <el-input v-model="password" ></el-input>
                        </el-form-item>
                    </el-form> -->

                    <br>
                    <br>
                    <el-input placeholder="请输入新密码" v-model="newPassword" show-password></el-input>
                    <br>
                    <br>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible_rili = false">取 消</el-button>
                        <el-button type="primary" @click="passwordModify(newPassword)">确认修改</el-button>
                    </div>
                </el-dialog>
              </div>
        </div>

    </div>
</template>

<script>
// import Mock from '../api/UserInfo.js';

export default {

    data() {
        return{
            dialogFormVisible_password:false,

            role:"",
            username:"",
            // Password:"11112333",
            initialLevel:"",
            learnPurpose:"",
            planning:"",
            learnStyle:"",
            id:"",
            oldPassword:"",
            newPassword:"",
            style:[],
            // style:["言语型","实践型"],
        };

    },
    created(){
        this.getUserInfo()
    },

    methods:{

        passwordModify(){

       },
       handleClose(){
        this.dialogFormVisible_password=false
       },
    //    get请求得到用户信息
       async getUserInfo(){
            // get方法请求  地址 与 参数（参数最好定义到data中）
            const { data:res} = await this.$http.get('user/userinfo')

            if(res.status !==200){
                return this.$message.error('获取用户信息失败')
            }
            console.log(res)

            this.role=res.data.role
            this.username=res.data.username
            this.id=res.data._id
            this.oldPassword=res.data.password
            // 学习风格
            this.style=res.data.style
            // 学习方式
            this.learnStyle=res.data.learnStyle

            // 初始等级
            if(res.data.initialLevel==1)
                this.initialLevel="ACM等参与者"
            else if(res.data.initialLevel==2)
                this.initialLevel="本专业"
            else (res.data.initialLevel==3)
                this.initialLevel="跨专业或爱好者"
            //学习目的
            if(res.data.learnPurpose==1)
                this.learnPurpose="后端技术"
            else if(res.data.learnPurpose==2)
                this.learnPurpose="前端技术"
            else if(res.data.learnPurpose==3)
                this.learnPurpose="计算机基础"
            else if(res.data.learnPurpose==4)
                this.learnPurpose="技术手段"
            else if(res.data.learnPurpose==5)
                this.learnPurpose="其他"

            // 学习计划
            if(res.data.planning==1)
                this.planning="科研"
            else if(res.data.planning==2)
                this.planning="就业"
            else if(res.data.planning==3)
                this.planning="留学"
            else if(res.data.planning==4)
                this.planning="学习技能"
            
            // 学习方式
            if(res.data.learnStyle==1)
                this.learnStyle="喜欢动手实践"
            else if(res.data.learnStyle==2)
                this.learnStyle="喜欢看书自学"
            else if(res.data.learnStyle==3)
                this.learnStyle="喜欢上课交流学习或看视频"
            else if(res.data.learnStyle==4)
                this.learnStyle="其他"

            // this.initialLelel=res.data.initialLelel
            // this.learnPurpose=res.data.learnPurpose
            // this.planning=res.data.planning
            // this.learnStyle=res.data.learnStyle
        },
        // 点击确认 提交数据请求
        async passwordModify(newPassword){
            const {data:res} = await this.$http.patch('user/passwordChange',{
                password:newPassword,
            })
            console.log(this.newPassword)

            if(res.status !==200){
                return this.$message.error('修改密码失败！')
            }
            // 旧密码替换为新密码
            this.oldPassword=this.newPassword

            // 关闭对话框
            this.dialogFormVisible_password = false
            // 刷新数据列表
            this.getUserInfo()
            // 提示修改成功
            this.$message.success('修改密码成功！')
        }

    }

}

</script>

<style>
#bginfo{
    background: url("../../assets/hua.jpeg") no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kuang{
    top: 50px;
    background-color:#fff;
    border: 1px solid #2196F3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 30px;
    height: 600px;
    width: 600px;


}
.listyle{
    margin-top: 20px;
    margin-left: 80px;
}
.listyle0{
    margin-top: 90px;
    margin-left: 80px;
}
.btns111{
    margin-top: 30px;
    margin-left: 270px;
}

</style>



